<template>
  <div class="main ff-regular">
    <div class="content">
      <div class="wrapper">
        <group-payment v-if="isGroup" :dataInfo="dataInfo"></group-payment>
        <div class="page" v-else>
          <!-- 支付成功 -->
          <div class="status-head" v-if="payType == 'success'">
            <img src="@/assets/images/pay/success.png" class="status-img" alt="">
            <div class="right">
              <div class="status-title ff-bold">{{ $t('pay.paymentSuccess') }}</div>
              <div class="status-desc">{{ calculateSubTit() }}</div>
              <div class="handle-sty">
                <Button type="primary" class="next-btn" @click="jumpIndex()">{{ showText() }}</Button>
                <Button type="primary" class="look-btn" @click="jumpOrder()">{{ handleText() }}</Button>
              </div>
            </div>
          </div>
          <!-- 支付失败 -->
          <div class="status-head" v-if="payType == 'fail'">
            <img src="@/assets/images/pay/fail.png" class="status-img" alt="">
            <div class="right">
              <!-- 支付失败 -->
              <div class="status-title ff-bold">{{ $t('pay.paymentFailure') }}</div>
              <!-- 支付失败 -->
              <div class="status-desc">{{ $t('pay.failSub') }}</div>
              <!-- 支付失败 -->
              <div class="handle-sty">
                <div class="kf-btn" @click="showWidget">
                  <img src="@/assets/images/pay/kf-pay.png" class="kf-icon" alt="">
                  <span>{{ $t('user.contact_service') }}</span>
                </div>
                <Button type="primary" class="next-pay" @click="jumpTextIndex()">{{ failText() }}</Button>
              </div>
            </div>
          </div>
          <!-- 支付成功 -->
          <div v-if="payType == 'success'">
            <div class="tip-tit ff-bold">{{ $t('pay.noteFollowing') }}：</div>
            <div class="sub-tip">1、{{ tipText1() }}</div>
            <div class="text">{{ tipText2() }}</div>
            <div class="sub-tip">2、{{ tipText3() }}</div>
            <div class="text">{{ tipText4() }}</div>
          </div>
          <!-- 支付失败 -->
          <div v-if="payType == 'fail'">
            <div class="tip-tit ff-bold">{{ $t('pay.fail_pay_tip_tit') }}：</div>
            <div class="text">1、{{ $t('pay.failText1') }}</div>
            <div class="text">2、{{ $t('pay.failText2') }}</div>
          </div>
          <!-- 引流 -->
          <img v-if="isOrder()" :src="imgOrderShow[userLanguage.code]" class="down-img" style="width: 520px;" alt="">
          <img v-if="isShow()" :src="imgExpressShow[userLanguage.code]" class="down-img" style="width: 520px;" alt="">
        </div>
        <div class="load-sty" v-if="loading">
          <t-loading></t-loading>
        </div>
      </div>
    </div>
    <grand-prize ref="grandRef" :activityId="activityId"></grand-prize>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getResultBack } from "@/api/pay";
import { orderQuery } from "@/api/order";
import { searchOrderFirst, lotteryClick } from "@/api/expressOrder";
import TLoading from "@/components/t-loading";
import GrandPrize from '../activity/freeShipping/components/grand-prize.vue';
import GroupPayment from './group-payment.vue';
export default {
  data() {
    return {
      payId: '',//支付id
      payType: '',//success fail
      loading: false,
      orderId: '',//订单号id
      activityId: '',
      imgOrderShow: {
        'zh_CN': require('@/assets/images/download/订中.png'),
        'en_US': require('@/assets/images/download/订英.png'),
        'fr_FR': require('@/assets/images/download/订法.png'),
        'de_DE': require('@/assets/images/download/订德.png'),
        'it_IT': require('@/assets/images/download/订意.png'),
        'pl_PL': require('@/assets/images/download/订波.png'),
        'pt_PT': require('@/assets/images/download/订葡.png'),
        'es_ES': require('@/assets/images/download/订西.png')
      },
      imgExpressShow: {
        'zh_CN': require('@/assets/images/download/运中.png'),
        'en_US': require('@/assets/images/download/运英.png'),
        'fr_FR': require('@/assets/images/download/运法.png'),
        'de_DE': require('@/assets/images/download/运德.png'),
        'it_IT': require('@/assets/images/download/运意.png'),
        'pl_PL': require('@/assets/images/download/运波.png'),
        'pt_PT': require('@/assets/images/download/运葡.png'),
        'es_ES': require('@/assets/images/download/运西.png')
      },
      isGroup: false,
      dataInfo: {}
    }
  },
  components: {
    TLoading,
    GrandPrize,
    GroupPayment
  },
  computed: {
    ...mapState({
      userLanguage: state => state.user.userLanguage
    })
  },
  created() {
    // 三方回调
    if (this.$route.query && this.$route.query.pid) {
      this.payId = this.$route.query.pid;
      this.loading = true;
      setTimeout(() => {
        this.getSearchMet(this.payId);
      }, 5000)
      return;
    }

    if (this.$route.query.orderNo) {
      let orderNoCharAt = this.$route.query.orderNo.charAt(0);
      // 运单支付
      if (this.$route.query.orderNo && orderNoCharAt == 'Y') {
        this.orderId = this.$route.query.orderNo;
        this.loading = false;
				// 是否运单首单
				if (this.orderId && this.orderId.startsWith('Y')) {
				  this.searchResult(this.orderId);
				}
        // orderQuery({ orderNo: this.$route.query.orderNo }).then((res) => {
        //   this.payType = res.result.payStatus == 'SUCCESS' ? 'success' : 'fail';
        //   this.loading = false;
        // });
      }
      // 零钱支付 订单 or 补款
      if (this.$route.query.orderNo) {
        if (orderNoCharAt == 'D') {
          this.getSearchMet(this.$route.query.orderNo);
        } else if (orderNoCharAt == 'I') {
          this.orderId = this.$route.query.orderNo;
          this.payType = 'success';
        } else {
          this.payType = 'success';
        }
      }
    }
  },
  methods: {
    getSearchMet(val) {
      getResultBack({ orderNo: val }).then((res) => {
        if (res.result.payGroupVO) {
          this.isGroup = true;
          this.dataInfo = res.result;
        } else {
          this.isGroup = false;
          this.orderId = res.result.orderNo;
          this.loading = false;
          this.payType = res.result.payStatus == 'SUCCESS' ? 'success' : 'fail';
          if (res.result.payStatus == 'SUCCESS') {
            // 是否运单首单
            if (this.orderId && this.orderId.startsWith('Y')) {
              this.searchResult(this.orderId);
            }
          }
        }
      }).catch(() => {
        this.loading = false;
      })
    },
    // 是否是订单或者子订单 I开头或者D开头
    isOrder() {
      return this.orderId.charAt(0) == 'D' || this.orderId.charAt(0) == 'I'
    },
    // 是否是运单
    isShow() {
      return this.orderId.charAt(0) == 'Y'
    },
    // 是否是充值单
    isShowRorder() {
      return this.orderId.charAt(0) == 'R'
    },
    calculateSubTit() {
      return this.isShow() ? this.$t('pay.parcelDelivery') : this.isShowRorder() ? this.$t('pay.depositSuccessfullyToppedUp') : this.$t('pay.successSub');
    },
    tipText1() {
      return this.isShow() ? this.$t('pay.advancePaymentForWaybill') : this.isShowRorder() ? this.$t('pay.success_tip_text') : this.$t('pay.success_tip_text');
    },
    tipText2() {
      return this.isShow() ? this.$t('pay.currentPayment') : this.isShowRorder() ? this.$t('pay.success_text_tip') : this.$t('pay.success_text_tip');
    },
    tipText3() {
      return this.isShow() ? this.$t('pay.followTheWaybill') : this.isShowRorder() ? this.$t('pay.attentionOrder') : this.$t('pay.attentionOrder');
    },
    tipText4() {
      return this.isShow() ? this.$t('pay.waybillProcessing') : this.isShowRorder() ? this.$t('pay.successExplan') : this.$t('pay.successExplan');
    },
    showText() {
      return this.isShow() ? this.$t('pay.continue') : this.isShowRorder() ? this.$t('pay.continueShopping') : this.$t('pay.continueShopping');
    },
    handleText() {
      return this.isShow() ? this.$t('pay.see') : this.isShowRorder() ? this.$t('pay.viewOrder') : this.$t('pay.viewOrder');
    },
    // 弃用
    failText() {
      return this.isShow() ? this.$t('pay.viewParcel') : this.isShowRorder() ? this.$t('pay.continueShopping') : this.$t('pay.viewOrder');
    },
    jumpIndex() {
      let url = this.isShow() ? '/user/warehouse' : this.isShowRorder() ? '/' : '/';
      this.$router.push(url);
    },
    jumpOrder() {
      let url = this.isShow() ? `/transport/roam?id=${this.orderId}` : this.isShowRorder() ? '/user/order' : '/user/order';
      this.$router.push(url);
    },
    // 暂不弃用
    jumpTextIndex() {
      let url = this.isShow() ? '/user/shipment' : this.isShowRorder() ? '/' : '/user/order';
      this.$router.push(url);
    },
    againMet() {
      if (this.$route.query) {
        // const id = this.$route.query.pid ? this.$route.query.order : this.$route.query.orderNo;
        // this.$router.push(`/pay?id=${id}`);
      }
    },
    showWidget() {
      if (window.ssq) {
        ssq.push('chatOpen')
      }
    },
    searchResult(val) {
      searchOrderFirst(val).then((res) => {
        if (res.result.activityId) {
          this.activityId = res.result.activityId;
          this.$refs.grandRef.open('resultPop');
          this.clickSave(res.result.activityId);
        }
      })
    },
    clickSave(activityId) {
      lotteryClick({ activityId: activityId, operateType: 1 });
    }
  }
}
</script>
<style lang="less" scoped>
.main {

  .content {
    background: #FFFFFF;
    min-height: 0;

    .wrapper {
      position: relative;
      margin: 32px 120px 120px 120px;

      .page {
        // min-height: 692px;

        .status-head {
          width: 100%;
          height: 206px;
          background: #FAFAFB;
          border-radius: 12px;
          padding: 26px 30px;
          display: flex;
          align-items: center;
          margin-bottom: 60px;

          .status-img {
            width: 195px;
          }

          .right {
            margin-left: 34px;

            .status-title {
              font-weight: 600;
              font-size: 28px;
              color: #333333;
              line-height: 33px;
              margin-bottom: 16px;
            }

            .status-desc {
              font-weight: 400;
              font-size: 21px;
              color: #767B93;
              line-height: 24px;
              margin-bottom: 26px;
            }

            .handle-sty {
              display: flex;
              align-items: center;
              gap: 16px;

              .next-btn {
                min-width: 186px;
                height: 50px;
                background: #FF3C82;
                border-radius: 8px 8px 8px 8px;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 21px;
              }

              .look-btn {
                min-width: 186px;
                height: 50px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FF3C82;
                background: #FFFFFF;
                font-weight: 400;
                font-size: 18px;
                color: #FF186B;
                line-height: 21px;
              }

              .kf-btn {
                min-width: 186px;
                height: 50px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FF3C82;
                background: #FFFFFF;
                font-weight: 400;
                font-size: 18px;
                color: #FF186B;
                line-height: 21px;
                cursor: pointer;
                display: inline-flex;
                justify-content: center;
                align-items: center;

                .kf-icon {
                  width: 24px;
                  height: 24px;
                  margin-right: 8px;
                }
              }

              .next-pay {
                min-width: 186px;
                height: 50px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FF3C82;
                background: #FF186B;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 21px;
              }
            }
          }
        }

        .tip-tit {
          font-weight: 600;
          font-size: 20px;
          color: #2D2354;
          line-height: 23px;
        }

        .sub-tip {
          font-weight: 400;
          font-size: 18px;
          color: #767B93;
          line-height: 21px;
          margin-top: 24px;
        }

        .text {
          font-weight: 400;
          font-size: 16px;
          color: #AEB0B9;
          line-height: 19px;
          margin-top: 12px;
        }

        .down-img {
          margin-top: 24px;
        }
      }

      .load-sty {
        min-height: 300px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
